<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="7" class="box">
        <el-card shadow="always" header="今日销售单" class="inner">
          <div style="margin-left: 10px;color: #999;font-size: 0.9rem;">
            订单数量: 120
          </div>
          <div
            style="margin-left: 10px;margin-top: 10px;color: #999;font-size: 0.9rem;"
          >
            应收款: ￥1200
          </div>
        </el-card>
        <el-card shadow="always" header="昨日销售单" class="inner">
          <div style="margin-left: 10px;color: #999;font-size: 0.9rem;">
            订单数量: 120
          </div>
          <div
            style="margin-left: 10px;margin-top: 10px;color: #999;font-size: 0.9rem;"
          >
            应收款: ￥1200
          </div>
        </el-card>
        <el-card shadow="always" header="近一周销售单" class="inner">
          <div style="margin-left: 10px;color: #999;font-size: 0.9rem;">
            订单数量: 120
          </div>
          <div
            style="margin-left: 10px;margin-top: 10px;color: #999;font-size: 0.9rem;"
          >
            应收款: ￥1200
          </div>
        </el-card>
        <el-card shadow="always" header="近一月销售单" class="inner">
          <div style="margin-left: 10px;color: #999;font-size: 0.9rem;">
            订单数量: 120
          </div>
          <div
            style="margin-left: 10px;margin-top: 10px;color: #999;font-size: 0.9rem;"
          >
            应收款: ￥1200
          </div>
        </el-card>
      </el-col>
      <el-col :span="9" style="height: 300px">
        <div id="container" style="height: 100%"></div>
      </el-col>
      <el-col :span="8" style="height: 300px">
        <div id="xiaoshou" style="height: 100%"></div>
      </el-col> </el-row
    ><el-row :gutter="24">
      <el-col :span="24" style="height: 300px">
        <div id="kehu" style="height: 100%"></div>
      </el-col> </el-row
    ><el-row :gutter="24">
      <el-col :span="12">
        <el-divider content-position="left">在客户下应收款分布情况</el-divider>
        <vxe-table :data="tableData">
          <vxe-column field="name" title="客户名称"></vxe-column>
          <vxe-column field="num" title="应收款￥"></vxe-column>
        </vxe-table>
      </el-col>
      <el-col :span="12">
        <el-divider content-position="left">在产品下应收款分布情况</el-divider>
        <vxe-table :data="tableData2">
          <vxe-column field="name" title="产品名称"></vxe-column>
          <vxe-column field="num" title="应收款￥"></vxe-column>
        </vxe-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      tableData: [
        {
          num: '1000万',
          name: '陕西龙门钢铁有限责任公司',
        },
        {
          num: '88829',
          name: '中国建设第三工程局有限公司',
        },
        {
          num: '399万',
          name: '重庆西凉物资有限公司',
        },
      ],
      tableData2: [
        {
          num: '102万',
          name: '桁架',
        },
        {
          num: '890',
          name: '楼承板',
        },
        {
          num: '3万',
          name: '镀锌钢板',
        },
        {
          num: '3万',
          name: '螺纹钢',
        },
      ],
    }
  },
  mounted() {
    this.handleClick()
    this.handleSaleClick()
    this.handleKehuClick()
  },
  methods: {
    handleClick() {
      var chartDom = document.getElementById('container')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '订单数', '应收款'],
          source: [
            { product: '2020-5', 订单数: 43.3, 应收款: 85.8 },
            { product: '2020-6', 订单数: 83.1, 应收款: 73.4 },
            { product: '2020-7', 订单数: 86.4, 应收款: 65.2 },
            { product: '2020-8', 订单数: 72.4, 应收款: 53.9 },
          ],
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }],
      }

      option && myChart.setOption(option)
    },
    handleSaleClick() {
      var chartDom = document.getElementById('xiaoshou')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '近一年销售产品分布',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '桁架' },
              { value: 735, name: '楼承板' },
              { value: 580, name: '镀锌钢板' },
              { value: 484, name: '	箍筋' },
              { value: 300, name: '螺纹钢' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
    handleKehuClick() {
      var chartDom = document.getElementById('kehu')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '近一年销售订单客户分布',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          name: '订单数',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',
          name: '客户名称',
          data: [
            '陕西龙门钢铁有限责任公司',
            '中国建设第三工程局有限公司',
            '中国第十二冶金建设公司',
            '重庆西凉物资有限公司',
          ],
        },
        series: [
          {
            type: 'bar',
            data: [18203, 23489, 29034, 104970],
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
::v-deep .el-card {
  overflow: hidden;
  border-radius: 8px;
}
::v-deep .el-card__header {
  padding-left: 1rem;
  line-height: 0.8rem;
  background: linear-gradient(90deg, #22bd88 0%, #1febc1 100%);
  color: #fff;
  font-size: 1rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.app-container {
  .box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .inner {
      width: 48%;
      margin: 10px 0;
    }
  }
  .box:nth-child(2n) {
    margin-left: 8px;
  }
}
</style>
